<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>积分</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_547056_9thlyznvzhv6ajor.css">
    <link rel="stylesheet" href="/sunfc/css/weui.min.css">
    <link rel="stylesheet" href="/sunfc/css/style.css">
    <link rel="stylesheet" href="/sunfc/css/jquery-weui.css">
    <script src="/res/vue.js"></script>
    <style>
        .weui-cell{height:40px}
        .weui-media-box {
            padding: 0px;
        }
        .weui-media-box__desc {
            color: #000;
            font-size: 13px;
        }
        .weui-media-box_appmsg{
            height:95px
        }
        .weui-media-box__desc{
            font-size: 17px;
        }
    </style>
</head>
<body ontouchstart>
<div class="index-top">
    <div class="index-back" onclick="window.location.href='{$back_url}'">
        <img src="/sunfc/images/back.png" width="15">
    </div>
    <p class="index-title">积分</p>
</div>
<!-- 这里写内容 -->
<div id="app"  style="background:#f4f4f4" class=" dd weui-pull-to-refresh">
    <!--下拉刷新-->
    <div class="weui-pull-to-refresh__layer" style="height: 0px;margin-top: 32px;">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down" style="margin-top: 10px">下拉刷新</div>
        <div class="up" style="margin-top: 10px">释放刷新</div>
        <div class="refresh" style="margin-top: 10px">正在刷新</div>
    </div>
    <!--积分列表-->
    <div class="weui-panel__bd"  style="margin-top:40px;background:white" >

        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" v-for="(item,index) in items" :data_id="item.id">
            <div v-if="item.content === '签到'">
                <div class="weui-media-box__hd" style="width:25%;width:60px;height:60px;border-radius:40px;border:1px solid  #ececec;margin:0px 30px 0px  15px">
                    <span  class="icon  icon-qiandao-kaoqindaqia"  style="width:40px;height:40px;color:#F9B631" ></span>
                </div>
            </div>
            <div v-else-if="item.content === '乘车'">
                <div class="weui-media-box__hd" style="width:25%;width:60px;height:60px;border-radius:40px;border:1px solid  #ececec;margin:0px 30px 0px  15px">
                    <span  class="icon  icon-siji-"  style="width:40px;height:40px;color:rgb(62,188,164)" ></span>
                </div>
            </div>
            <div v-else-if="item.content === '载客'">
                <div class="weui-media-box__hd" style="width:25%;width:60px;height:60px;border-radius:40px;border:1px solid  #ececec;margin:0px 30px 0px  15px">
                    <span  class="icon  icon-iconczctk"  style="width:40px;height:40px;color:#73BAE6" ></span>
                </div>
            </div>

            <div class="weui-media-box__bd">
                <p class="weui-media-box__desc"   style="margin-top:5px;">{{item.content}}{{item.sign}}{{item.number}}
                    <span   style="color:#F9B834;margin-left:10px"  class="icon  icon-tongyongjifen"></span></p>
            </div>
            <div class="weui-cell__ft"><span  style="padding:10px">{{item.create_time}}</span></div>
        </a>

    </div>

    <!--加载更多-->
    <div class="weui-loadmore" style="padding-bottom:30px;height:20px;margin: 1.5em auto 0em auto;">
        <i class="weui-loading" style="margin-top: 10px"></i>
        <span class="weui-loadmore__tips" style="margin-top: 10px">正在加载</span>
    </div>
</div>

</div>

</div>
<script src="/sunfc/js/jquery-2.1.4.js"></script>
<script src="/sunfc/js/jquery-weui.js"></script>
<script>
    var flag = 1;//标志位：用于判断是否为第一次上拉加载出现无数据情况

    //vue对象
    var app = new Vue({
        el: '#app',
        data: {
            curr: 1,//当前页
            items: []
        }
    });

    //加载下拉刷新数据
    function init() {
        $.get('/index/sunfc.index/show_log',
            function (res) {
                //上拉加载数据后，再次执行下拉刷新时，将重置当前页为1
                app.curr = 1;
                //上拉加载数据后，再次执行下拉刷新时，重新展示下拉加载
                $(".weui-loadmore").show();
                //上拉加载数据后，再次执行下拉刷新时，将重置标志位
                flag = 1;
                //移除上拉加载产生的暂无数据div元素
                $("#zanwu").remove();
                //重新绑定数据
                app.items = res.data;
                console.log('1');
                $(".weui-loadmore").hide();
                var str = "<div id='zanwu' class=\"weui-cells__title\" style=\"line-height: 50px;text-align: center;background-color:white;border-top:1px solid #e4e4e4;margin-bottom:0px;margin-top: 0px\" >暂无更多数据</div>";
                $("#app").append(str);
            }
        );
    }

    //初始数据
    $(function () {
        init();
    });

    //下拉刷新数据
    $('.dd').pullToRefresh().on('pull-to-refresh', function (done) {
        var self = this
        setTimeout(function() {
            init();
            $(self).pullToRefreshDone();
        }, 2000)
    });

    //上拉加载数据
    function init1() {
        $.get('/index/sunfc.index/show_log',
            {page: app.curr},
            function (res) {
                if(res.data.length>0){
                    app.items = app.items.concat(res.data);
                    $(".weui-loadmore").hide();
                }
                else{
                    //如果是第一次出现无数据展示暂无数据
                    if(flag ==1 ){
                        flag++;
                        var str = "<div id='zanwu' class=\"weui-cells__title\" style=\"line-height: 50px;text-align: center;background-color:white;border-top:1px solid #e4e4e4;margin-bottom:0px;margin-top: 0px\" >暂无更多数据</div>";
                        $("#app").append(str);
                    }
                    $(".weui-loadmore").hide();
                }
            }
        );
    }

    //滚动加载
    var loading = false;
    $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        app.curr++;
        setTimeout(function() {
            init1();
            loading = false;
        }, 2000);
    });

</script>
</body>
</html>
